<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				display:block;
				margin:0 auto;
			}
		</style>
		<script src="js/common/common.js"></script>
		<script src="js/roles/loadImg.js"></script>
		<script src="js/roles/loadLand.js"></script>
		<script src="js/roles/loadBird.js"></script>
		<script src="js/roles/loadTime.js"></script>
		<script src="js/roles/loadPipe.js"></script>
		<script src="js/roles/loadBackGround.js"></script>
		<script src="js/scene/gameScene.js"></script>
		<script src="js/scene/overScene.js"></script>
	</head>
	<body>
		<canvas style="border: 6px dashed red" width="800" height="600"></canvas>
		</script>
		<script type="text/javascript">
			var cvs = document.querySelector("canvas");
			var ctx = cvs.getContext("2d");
			loadImg({
				"birds": "imgs/birds.png",
				"land": "imgs/land.png",
				"pipeDown": "imgs/pipeDown.png",
				"pipeUp": "imgs/pipeUp.png",
				"sky": "imgs/sky.png"
			}, function(loadImg) {
				
				var gameScene1=new gameScene({ctx:ctx,imgs:loadImg});
				var gameOver1=new gameOver({ctx:ctx});

				var getLastTime;
				var isStop=false;
				
				(function loop(){
					//如果小鸟死了，游戏结束
					if(isStop ){
						gameOver1.run();
						return;
					}
					
					//每次绘制之前清除一次画布 及路径
					ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
					ctx.beginPath();

					//更新坐标 时间
					//第一次执行时，时间为现在时间 // 第一次为当前时间，以后都为上一次游戏画面绘制的时间
					getLastTime = getLastTime ? getLastTime : Date.now();
					var getCurrentTime = Date.now();
					var delaySecond = (getCurrentTime - getLastTime) / 1000;

					//本次最后的时间是现在时间// 下一次游戏画面绘制的最后时间，是当前时间
					getLastTime = getCurrentTime;

					gameScene1.run( delaySecond );
					//将返回值赋给isStop
					isStop=gameScene1.isBirdDie();
					
					requestAnimationFrame(loop);
				}())
			})
		</script>
	</body>

</html>